<template>
    <div>
        <el-divider content-position="center"><span
                style="font-size: 17px;color: #0800ff;font-weight:bold">疫情科普信息管理</span>
        </el-divider>
        <div class="divstyle">
            <el-card class="box-card">
                <div style="padding-left: 86%">
                    <el-button type="danger" size="mini" @click="showAddKnowledge">添加</el-button>
                </div>
                <el-divider></el-divider>
                <el-divider></el-divider>
                <el-table stripe border :data="AllKnowledge.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                    <el-table-column label="ID" prop="id" width="60" align="center" v-if="showClose"></el-table-column>
                    <el-table-column label="标题" prop="title" align="center"></el-table-column>
                    <el-table-column label="操作" width="215" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="deleteKnowledgeById(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="divstyle">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   small
                                   background
                                   :page-sizes="[5,10,20,100]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="AllKnowledge.length">
                    </el-pagination>
                </div>
            </el-card>
        </div>


        <el-dialog title="疫情科普" :visible.sync="showDialog" center width="35%">
            <el-form :model="KnowledgeInfo">
                <el-form-item label="标题">
                    <el-input v-model="KnowledgeInfo.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容:">
                    <el-input type="textarea" v-model="KnowledgeInfo.article" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="addKnowledge">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "preventionManage",
        data() {
            return {
                page: 0,
                currentPage: 1,
                pageSize: 5,
                showClose: false,
                showDialog: false,
                AllKnowledge: [],
                KnowledgeInfo: {title: "", article: ""},
            }
        },
        created() {
            this.getAllKnowledge()
        },
        methods: {
            async getAllKnowledge() {
                const {data: res} = await this.$http.get("getAllKnowledge?page=" + this.page);
                this.AllKnowledge = res.allKnowledge
            },
            async deleteKnowledgeById(row) {
                const {data: res} = await this.$http.get("deleteKnowledgeById?id=" + row);
                if (res === "ok") {
                    await this.getAllKnowledge()
                    this.$message.success("成功")
                } else {
                    this.$message.error("失败")
                }
            },
            showAddKnowledge() {
                this.showDialog = true
            },
            async addKnowledge() {
                if (this.KnowledgeInfo.title === "" || this.KnowledgeInfo.article === "") {
                    this.$message.error("请填写完整内容！！！")
                } else {
                    const {data: res} = await this.$http.post("addKnowLedge", this.KnowledgeInfo);
                    if (res === "ok") {
                        this.showDialog = false
                        await this.getAllKnowledge()
                        this.$message.success("成功")
                        this.KnowledgeInfo.title = ""
                        this.KnowledgeInfo.article = ""
                    } else {
                        this.$message.error("失败")
                    }
                }
            },
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
        },
    }
</script>

<style scoped>
    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-card {
        width: 90%;
    }

    /*分割线样式*/
    .el-divider--horizontal {
        margin: 8px 0;
        background: 0 0;
        border-top: 1px dashed #0979ea;
    }
</style>